const Core = require("../../utils/core.js");

// components/popup-slide.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    disableFlag: false, // 是否使组件失效, 参见 disabled
    showFlag: false, // 显示标志, 参见 showed
    autoHideFalg: true, // 是否点击遮罩自动关闭, 参见 autoHided
    staticFlag: false, // 是否静态显示
    animationData: {}, // 动画数据
    container: null,  // 容器
    containerHeight: null  // 容器高度
  },

  /**
   * 组件的属性列表
   */
  properties: {
    /** 是否使组件失效, 默认否 */
    disabled: { type: Boolean, value: false },
    /** 显示还是隐藏弹出框, 默认显示 */
    showed: { type: Boolean, value: false },
    /** 是否为模态框, 默认为是 */
    modaled: { type: Boolean, value: true },
    /** 是否点击遮罩自动关闭（前提：开启遮罩）, 默认为是 */
    autoHided: { 
      type: Boolean, // 使用方式1：{{true}}
      value: true,
      optionalTypes: [String] // 使用方式2：'true'
    },
    /** 是否静态(无动画)显示与隐藏，默认为否 */
    staticed: {
      type: Boolean, // 使用方式1：{{true}}
      value: true,
      optionalTypes: [String] // 使用方式2：'true'
    },
    /** 高度相关 */
    minHeight: { type: String, value: 'auto' },
    maxHeight: { type: String, value: 'auto' },
    // /** 展示方向 */
    // direction: { type: String, value: 'top' },
  },

  /**
   * 监听属性
   */
  observers: {
    'disabled': function (disabled){
      if (Core.Type.IsString(disabled)) {
        this.setData({ disableFlag: disabled.toBool() })
      } else {
        this.setData({ disableFlag: disabled })
      }
    },
    'autoHided': function (autoHided){
      if (Core.Type.IsString(autoHided)){
        this.setData({ autoHideFalg: autoHided.toBool() })
      }else{
        this.setData({ autoHideFalg: autoHided })
      }
    },
    'staticed': function (staticed) {
      if (Core.Type.IsString(staticed)) {
        this.setData({ staticFlag: staticed.toBool() })
      } else {
        this.setData({ staticFlag: staticed })
      }
    },
    'showed': function (showed) {
      if (showed){
        this._onShow()
      }else{
        this._onHide()
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /* 设置为隐藏状态 */
    onHide: function () {
      const _this = this;
      _this.setData({
        showed: false
      })
      // 激活事件
      _this.triggerEvent(
        'hide'
      );
    },
    /**
    * 显示弹出框
    */
    _onShow: function () {
      const _this = this;
      // 获取容器高度
      // this._getContainerHeight(containerHeight => {
        // this.setData({
        //   containerHeight: containerHeight
        // });
        //
        // 显示遮罩层
      if (!_this.data.staticFlag){
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        _this.animation = animation
        animation.translateY(300).step()
        _this.setData({
          animationData: animation.export(),
          showFlag: true
        })
        setTimeout(function () {
          animation.translateY(0).step()
          _this.setData({
            animationData: animation.export()
          })
        }.bind(_this), 200)
      }else{
        _this.setData({
          showFlag: true
        })
      }
      // });
    },
    /**
     * 隐藏弹出框
     */
    _onHide: function () {
      const _this = this;
      if (!_this.data.staticFlag){
        // 隐藏遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        _this.animation = animation
        animation.translateY(300).step()
        _this.setData({
          animationData: animation.export(),
        })
        setTimeout(function () {
          animation.translateY(0).step()
          _this.setData({
            animationData: animation.export(),
            showFlag: false
          })
        }.bind(_this), 200)
      }else{
        _this.setData({
          showFlag: false
        })
      }
    },
    /**
    * 得到高度
    */
    _getContainerHeight: function (success) {
      this
        .data
        .container
        .fields(
          { size: true },
          (res) => {
            // 成功后回调
            console.log(res)
            success(res.height);
          }
        )
        .exec()
    }
  },

  /**
   * 组件的生命周期
   */
  lifetimes: {
    attached: function () {

    },
    ready: function () {
      // 选中容器
      // var container = this.createSelectorQuery().select('.container');
      // this.setData({ container: container});
    }
  }

})
